<template>
  <div class="content">
    <div class="card_header">电表监测</div>

    <div class="card_table">
      <el-container>
        <el-aside width="160px">
          <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="楼宇" name="first">
              <el-tree style="max-width: 600px" :data="treeData" :props="defaultProps"
                @node-click="handleNodeClick" /></el-tab-pane>
            <el-tab-pane label="配电房" name="second"><el-tree style="max-width: 600px" :data="treeDataTwo"
                :props="defaultProps" @node-click="handleNodeClick" /></el-tab-pane>
          </el-tabs>
        </el-aside>
        <el-main>
          <div class="card_form">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item label="类型">
                <el-select v-model="value" placeholder="请选择">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="数据状态">
                <el-select v-model="value" placeholder="请选择">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" :icon="Search" @click="onSubmit">查询</el-button>
                <el-button type="default" :icon="Refresh" @click="onSubmit">重置</el-button>
              </el-form-item>
            </el-form>
            <div class="check_status">
              <div :class="check == 0 ? 'check' : ''" @click="check++">表格</div>
              <div :class="check != 0 ? 'check' : ''" @click="check--">图形图表</div>
            </div>
          </div>
          <div v-show="check != 0"
            style="display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;">
            <div class="card_item" v-for="(item, index) in tableData" :key="index" @click="onDetail">
              <div class="card_item_header">
                <div style="display: flex;
    justify-content: flex-start;
    align-items: center;">
                  <el-image v-show="item.status == 0" style="width: 44px;height: 22px;" fit="cover"
                    src="" />
                  <el-image v-show="item.status == 1" style="width: 44px;height: 22px;" fit="cover"
                    src="" />
                  <div style="margin-left: 2px;">{{ item.status == 0 ? '离线' : '在线' }}</div>
                </div>
                <div style="color: #f3f3f3;">{{ item.use }}</div>
              </div>
              <div class="card_item_body">
                <div style="font-weight: 600;text-align: center;">NO.{{ item.id }}</div>
                <div style="color: #ffff;display: flex;justify-content: center;align-items: center;">
                  <div style="background-color: black;border-radius: 5px;width: 50%;text-align: right;">{{ item.sum_num
                  }}</div>
                  <div
                    style="background-color: red;border-radius: 5px;;margin-left: 2px;width: 20%;text-align: center;">{{
                      item.double }}</div>
                </div>
                <div style="display: flex;justify-content: space-between;align-items: center;color:#515a6e;">
                  <div>倍率：{{ item.double }}</div>
                  <div>{{ item.gettype }}/{{ item.settype }}</div>
                </div>
                <div style="color: #515a6e;">
                  {{ item.communicationDate }}
                </div>
              </div>
            </div>
          </div>
          <el-table v-show="check == 0" :data="tableData" style="width: 100%"
            :default-sort="{ prop: 'date', order: 'descending' }" border stripe>
            <el-table-column label="电表编号" prop="id" align="center" width="120">
              <template #default="scope">
                <div @click="onDetail">
                  NO.{{ scope.row.id }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="用途" prop="use" align="center" show-overflow-tooltip />
            <el-table-column label="租户名称" prop="use_name" align="center" width="120" show-overflow-tooltip />

            <el-table-column label="状态" align="center">
              <template #default="scope">
                <div v-if="scope.row.status == 0">
                  <el-tag type="info">离线</el-tag>
                </div>
                <div v-if="scope.row.status == 1">
                  <el-tag type="success">在线</el-tag>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="倍率" prop="double" align="center" />

            <el-table-column label="电压(V)" align="center"><el-table-column label="UA" sortable prop="UA"
                align="center" />
              <el-table-column label="UB" sortable prop="UB" align="center" />
              <el-table-column label="UC" sortable prop="UC" align="center" /></el-table-column>
            <el-table-column label="电流(A)" align="center"><el-table-column label="IA" sortable prop="IA"
                align="center" />
              <el-table-column label="IB" sortable prop="IB" align="center" />
              <el-table-column label="IC" sortable prop="IC" align="center" /></el-table-column>
            <el-table-column label="读数" align="center"><el-table-column label="尖" sortable prop="J" align="center" />
              <el-table-column label="峰" sortable prop="F" align="center" />
              <el-table-column label="平" sortable prop="P" align="center" />
              <el-table-column label="谷" sortable prop="G" align="center" />
              <el-table-column label="总" sortable prop="Z" align="center" /></el-table-column>
            <el-table-column label="需量" align="center"><el-table-column label="当月" sortable prop="mounth"
                align="center" />
              <el-table-column label="实时" sortable prop="new_day" align="center" /></el-table-column>
            <el-table-column label="正向功率" align="center"><el-table-column label="有功" sortable prop="YG"
                align="center" />
              <el-table-column label="无功" sortable prop="WG" align="center" /></el-table-column>
            <el-table-column fixed="right" label="操作" width="100" align="center">
              <template #default>
                <el-button link type="primary" size="small" @click="onDetail">
                  详情
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div style="width: 30%; position: absolute; bottom: 30px; right: 80px">
            <el-pagination background layout="prev, pager, next" :total="100" />
          </div>
        </el-main>
      </el-container>
    </div>
    <el-drawer v-model="detailShow" :show-close="false" size="50%">
      <template #header="{ close, titleId, titleClass }">
        <div @click="close" :id="titleId" :class="titleClass" class="titleClass_electric">
          <el-icon color="#409eff">
            <ChatLineSquare />
          </el-icon>
          <span> 详情 </span>
        </div>
      </template>
      <div class="card_details">
        <div class="card_box">
          <div class="card_header">基本信息</div>
          <div class="card_box_descriptions">
            <el-descriptions class="margin-top" :column="3" :size="size" border>
              <el-descriptions-item align="center">
                <template #label>
                  <div class="cell-item">
                    电表号
                  </div>
                </template>
                25
              </el-descriptions-item>
              <el-descriptions-item align="center">
                <template #label>
                  <div class="cell-item">
                    电表峰初始值
                  </div>
                </template>
                0
              </el-descriptions-item>
              <el-descriptions-item align="center">
                <template #label>
                  <div class="cell-item">
                    电表平初始值
                  </div>
                </template>
                0
              </el-descriptions-item>
              <el-descriptions-item align="center">
                <template #label>
                  <div class="cell-item">
                    电表谷初始值
                  </div>
                </template>
                0
              </el-descriptions-item>
              <el-descriptions-item align="center">
                <template #label>
                  <div class="cell-item">
                    用途
                  </div>
                </template>
                科斗
              </el-descriptions-item>
              <el-descriptions-item align="center">
                <template #label>
                  <div class="cell-item">
                    电表安装位置
                  </div>
                </template>
                配电室1#变子表
              </el-descriptions-item>
              <el-descriptions-item align="center">
                <template #label>
                  <div class="cell-item">
                    余额提醒
                  </div>
                </template>

              </el-descriptions-item>
              <el-descriptions-item align="center">
                <template #label>
                  <div class="cell-item">
                    倍率
                  </div>
                </template>
                1
              </el-descriptions-item>
              <el-descriptions-item align="center">
                <template #label>
                  <div class="cell-item">
                    波特率
                  </div>
                </template>
                2400
              </el-descriptions-item>
              <el-descriptions-item align="center">
                <template #label>
                  <div class="cell-item">
                    配电室名称
                  </div>
                </template>
                1#变子表
              </el-descriptions-item>
              <el-descriptions-item align="center">
                <template #label>
                  <div class="cell-item">
                    安装时间
                  </div>
                </template>
                2024-10-21
              </el-descriptions-item>
              <el-descriptions-item align="center">
                <template #label>
                  <div class="cell-item">
                    协议名称
                  </div>
                </template>
                青澜实业HANER
              </el-descriptions-item>
              <el-descriptions-item align="center">
                <template #label>
                  <div class="cell-item">
                    柜号
                  </div>
                </template>
                415-5
              </el-descriptions-item> <el-descriptions-item align="center">
                <template #label>
                  <div class="cell-item">
                    读数来源
                  </div>
                </template>
                智联器
              </el-descriptions-item>
              <el-descriptions-item align="center">
                <template #label>
                  <div class="cell-item">
                    传递方式
                  </div>
                </template>
                单相
              </el-descriptions-item>
              <el-descriptions-item align="center">
                <template #label>
                  <div class="cell-item">
                    通信方式
                  </div>
                </template>
                互感
              </el-descriptions-item>
              <el-descriptions-item align="center">
                <template #label>
                  <div class="cell-item">
                    是否可控制
                  </div>
                </template>
                是
              </el-descriptions-item> <el-descriptions-item align="center">
                <template #label>
                  <div class="cell-item">
                    断电状态
                  </div>
                </template>
                通电
              </el-descriptions-item>
              <el-descriptions-item align="center">
                <template #label>
                  <div class="cell-item">
                    核查联户号
                  </div>
                </template>

              </el-descriptions-item>


            </el-descriptions>
          </div>
        </div>
        <div class="card_box">
          <div class="card_header" style="
              background: linear-gradient(
                90deg,
                #f39c0f,
                rgb(209.4, 236.7, 195.9),
                rgba(241, 158, 21, 0)
              );
            ">采集数据</div>
          <div class="card_box_descriptions">
            <el-descriptions class="margin-top" :column="3" :size="size" border>
              <el-descriptions-item align="center">
                <template #label>
                  <div class="cell-item">
                    A相电流
                  </div>
                </template>
                <div style="display: flex;justify-content: space-between;align-items: center;">
                  <div>26.10</div>
                  <div @click="onChartDetail"> <el-icon color="#409eff">
                      <Histogram />
                    </el-icon></div>
                </div>
              </el-descriptions-item>
              <el-descriptions-item align="center">
                <template #label>
                  <div class="cell-item">
                    B相电流
                  </div>
                </template>
                <div style="display: flex;justify-content: space-between;align-items: center;">
                  <div>26.10</div>
                  <div @click="onChartDetail"> <el-icon color="#409eff">
                      <Histogram />
                    </el-icon></div>
                </div>

              </el-descriptions-item>
              <el-descriptions-item align="center">
                <template #label>
                  <div class="cell-item">
                    c相电流
                  </div>
                </template>
                <div style="display: flex;justify-content: space-between;align-items: center;">
                  <div>26.10</div>
                  <div @click="onChartDetail"> <el-icon color="#409eff">
                      <Histogram />
                    </el-icon></div>
                </div>

              </el-descriptions-item>
              <el-descriptions-item align="center">
                <template #label>
                  <div class="cell-item">
                    A相电压
                  </div>
                </template>
                <div style="display: flex;justify-content: space-between;align-items: center;">
                  <div>26.10</div>
                  <div @click="onChartDetail"> <el-icon color="#409eff">
                      <Histogram />
                    </el-icon></div>
                </div>

              </el-descriptions-item>
              <el-descriptions-item align="center">
                <template #label>
                  <div class="cell-item">
                    B相电压
                  </div>
                </template>
                <div style="display: flex;justify-content: space-between;align-items: center;">
                  <div>26.10</div>
                  <div @click="onChartDetail"> <el-icon color="#409eff">
                      <Histogram />
                    </el-icon></div>
                </div>

              </el-descriptions-item>
              <el-descriptions-item align="center">
                <template #label>
                  <div class="cell-item">
                    c相电压
                  </div>
                </template>
                <div style="display: flex;justify-content: space-between;align-items: center;">
                  <div>26.10</div>
                  <div @click="onChartDetail"> <el-icon color="#409eff">
                      <Histogram />
                    </el-icon></div>
                </div>

              </el-descriptions-item>
              <el-descriptions-item align="center">
                <template #label>
                  <div class="cell-item">
                    上一结算日
                  </div>
                </template>

              </el-descriptions-item>
              <el-descriptions-item align="center">
                <template #label>
                  <div class="cell-item">
                    倍率
                  </div>
                </template>
                1
              </el-descriptions-item>
              <el-descriptions-item align="center">
                <template #label>
                  <div class="cell-item">
                    波特率
                  </div>
                </template>
                2400
              </el-descriptions-item>
              <el-descriptions-item align="center">
                <template #label>
                  <div class="cell-item">
                    配电室名称
                  </div>
                </template>
                1#变子表
              </el-descriptions-item>
              <el-descriptions-item align="center">
                <template #label>
                  <div class="cell-item">
                    安装时间
                  </div>
                </template>
                2024-10-21
              </el-descriptions-item>
              <el-descriptions-item align="center">
                <template #label>
                  <div class="cell-item">
                    协议名称
                  </div>
                </template>
                青澜实业HANER
              </el-descriptions-item>
              <el-descriptions-item align="center">
                <template #label>
                  <div class="cell-item">
                    柜号
                  </div>
                </template>
                415-5
              </el-descriptions-item> <el-descriptions-item align="center">
                <template #label>
                  <div class="cell-item">
                    读数来源
                  </div>
                </template>
                智联器
              </el-descriptions-item>
              <el-descriptions-item align="center">
                <template #label>
                  <div class="cell-item">
                    传递方式
                  </div>
                </template>
                单相
              </el-descriptions-item>
              <el-descriptions-item align="center">
                <template #label>
                  <div class="cell-item">
                    通信方式
                  </div>
                </template>
                互感
              </el-descriptions-item>
              <el-descriptions-item align="center">
                <template #label>
                  <div class="cell-item">
                    是否可控制
                  </div>
                </template>
                是
              </el-descriptions-item> <el-descriptions-item align="center">
                <template #label>
                  <div class="cell-item">
                    断电状态
                  </div>
                </template>
                通电
              </el-descriptions-item>
              <el-descriptions-item align="center">
                <template #label>
                  <div class="cell-item">
                    核查联户号
                  </div>
                </template>

              </el-descriptions-item>


            </el-descriptions>
          </div>
        </div>
        <div class="card_box">
          <div class="card_header" style="
              background: linear-gradient(
                90deg,
                #67c23a,
                rgb(209.4, 236.7, 195.9),
                rgba(44, 166, 224, 0)
              );
            ">
            关联信息
          </div>
          <div class="card_box_descriptions">
            <el-scrollbar max-height="300px">
              <el-table :data="tableData" style="width: 100%" :default-sort="{ prop: 'date', order: 'descending' }"
                border stripe height="300">
                <el-table-column label="电表号" prop="id" align="center" width="120">
                  <template #default="scope">
                    <div>
                      {{ scope.row.id }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="房间号" prop="type" align="center" width="120" />
                <el-table-column label="电表状态" align="center" width="120">
                  <template #default="scope">
                    <div v-if="scope.row.status == 0">
                      <el-tag type="info">离线</el-tag>
                    </div>
                    <div v-if="scope.row.status == 1">
                      <el-tag type="success">在线</el-tag>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="租户" prop="total" align="center" />
                <el-table-column label="备注" prop="online_total" align="center" />
              </el-table>
            </el-scrollbar>
          </div>
        </div>
        <div class="card_box">
          <div class="card_header" style="
              background: linear-gradient(
                90deg,
                #909399,
                rgb(232.8, 233.4, 234.6),
                rgba(44, 166, 224, 0)
              );
            ">
            操作日志
          </div>
          <div class="card_box_descriptions">
            <el-scrollbar max-height="200px">
              <ul class="log">
                <li style="font-size: 14px">
                  <span style="padding-right: 20px">2025/02/07 16:42:11</span>
                  <span style="padding-right: 20px"><el-icon>
                      <More />
                    </el-icon></span>
                  <span style="padding-right: 20px">运维</span>

                  <span style="padding-right: 20px; color: #909399">新增采集设备:SZ.DJK.031</span>
                </li>
                <li style="font-size: 14px">
                  <span style="padding-right: 20px">2025/02/07 16:42:11</span>
                  <span style="padding-right: 20px"><el-icon>
                      <More />
                    </el-icon></span>
                  <span style="padding-right: 20px">运维</span>

                  <span style="padding-right: 20px; color: #909399">新增采集设备:SZ.DJK.031</span>
                </li>
              </ul>
            </el-scrollbar>
          </div>
        </div>
      </div>
    </el-drawer>
    <el-dialog v-model="chartShow" title="图表" width="900" align-center>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="chartShow = false">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { Histogram, Search, Refresh, More } from "@element-plus/icons-vue";
import { ref, reactive } from "vue";
const activeName = ref("first");
const check = ref(0);

const handleClick = (tab, event) => {
  console.log(tab, event);
};
const handleNodeClick = (data) => {
  console.log(data);
};

const treeData = [
  {
    label: "青澜实业",
    children: [
      {
        label: "大健康楼",
        children: [
          {
            label: "一层",
          },
          {
            label: "二层",
          },
          {
            label: "三层",
          },
          {
            label: "四层",
          },
        ],
      },
    ],
  },
];
const treeDataTwo = [
  {
    label: "青澜实业",
    children: [
      {
        label: "青澜实业配电房",
        children: [
          {
            label: "1#变压器",
            children: [
              {
                label: "1#变子表",
              },
              {
                label: "413-1",
                children: [
                  {
                    label: "413-1子表",
                  },
                ],
              },
            ],
          },
          {
            label: "2#变压器",
            children: [
              {
                label: "2#变子表",
              },
              {
                label: "423-1 ALZ14",
                children: [
                  {
                    label: "423-1子表",
                  },
                ],
              },
            ],
          },
        ],
      },
    ],
  },
];
const defaultProps = {
  children: "children",
  label: "label",
};
const formInline = reactive({
  user: "",
  region: "",
  date: "",
});
const detailShow = ref(false);
const chartShow = ref(false);

const tableData = ref([
  {
    id: "001",
    use: '科斗',
    use_name: '科斗(苏州)脑际科技',
    gettype: "单相",
    settype: "互感",
    status: "0",
    double: "1",
    line_name: "青澜实业HANER",
    num: "415-5",
    sum_num: "155341",
    room: "1#变子表",
    communicationDate: "2025-02-06 16:34:33",
    UA: 227.7,
    UB: 227.9,
    UC: 227.7,
    IA: 26.1,
    IB: 12.2,
    IC: 37.3,
    J: 0.0, F: 0.0, P: 0.0, G: 0.0, Z: 0.0,
    mounth: 0.0, new_day: 0.0,
    YG: 0.0,
    WG: 0.0
  },
  {
    id: "002",
    use: '科斗',
    use_name: '科斗(苏州)脑际科技',
    gettype: "单相",
    settype: "互感",
    status: "1",
    double: "1",
    line_name: "青澜实业HANER",
    num: "415-5",
    sum_num: "155341",
    room: "1#变子表",
    communicationDate: "2025-02-06 16:34:33",
    UA: 227.7,
    UB: 227.9,
    UC: 227.7,
    IA: 26.1,
    IB: 12.2,
    IC: 37.3,
    J: 0.0, F: 0.0, P: 0.0, G: 0.0, Z: 0.0,
    mounth: 0.0, new_day: 0.0,
    YG: 0.0,
    WG: 0.0
  },
  {
    id: "002", use: '科斗',
    use_name: '科斗(苏州)脑际科技',
    gettype: "单相",
    settype: "互感",
    status: "1",
    double: "1",
    line_name: "青澜实业HANER",
    num: "415-5",
    sum_num: "155341",
    room: "1#变子表",
    communicationDate: "2025-02-06 16:34:33",
    UA: 227.7,
    UB: 227.9,
    UC: 227.7,
    IA: 26.1,
    IB: 12.2,
    IC: 37.3,
    J: 0.0, F: 0.0, P: 0.0, G: 0.0, Z: 0.0,
    mounth: 0.0, new_day: 0.0,
    YG: 0.0,
    WG: 0.0
  },
  {
    id: "004", use: '科斗',
    use_name: '科斗(苏州)脑际科技',
    gettype: "单相",
    settype: "互感",
    status: "1",
    double: "1",
    line_name: "青澜实业HANER",
    num: "415-5",
    sum_num: "155341",
    room: "1#变子表",
    communicationDate: "2025-02-06 16:34:33",
    UA: 227.7,
    UB: 227.9,
    UC: 227.7,
    IA: 26.1,
    IB: 12.2,
    IC: 37.3,
    J: 0.0, F: 0.0, P: 0.0, G: 0.0, Z: 0.0,
    mounth: 0.0, new_day: 0.0,
    YG: 0.0,
    WG: 0.0
  }, {
    id: "005", use: '科斗',
    use_name: '科斗(苏州)脑际科技',
    gettype: "单相",
    settype: "互感",
    status: "1",
    double: "1",
    line_name: "青澜实业HANER",
    num: "415-5",
    sum_num: "155341",
    room: "1#变子表",
    communicationDate: "2025-02-06 16:34:33",
    UA: 227.7,
    UB: 227.9,
    UC: 227.7,
    IA: 26.1,
    IB: 12.2,
    IC: 37.3,
    J: 0.0, F: 0.0, P: 0.0, G: 0.0, Z: 0.0,
    mounth: 0.0, new_day: 0.0,
    YG: 0.0,
    WG: 0.0
  }, {
    id: "006", use: '科斗',
    use_name: '科斗(苏州)脑际科技',
    gettype: "单相",
    settype: "互感",
    status: "1",
    double: "1",
    line_name: "青澜实业HANER",
    num: "415-5",
    sum_num: "155341",
    room: "1#变子表",
    communicationDate: "2025-02-06 16:34:33",
    UA: 227.7,
    UB: 227.9,
    UC: 227.7,
    IA: 26.1,
    IB: 12.2,
    IC: 37.3,
    J: 0.0, F: 0.0, P: 0.0, G: 0.0, Z: 0.0,
    mounth: 0.0, new_day: 0.0,
    YG: 0.0,
    WG: 0.0
  }, {
    id: "007", use: '科斗',
    use_name: '科斗(苏州)脑际科技',
    gettype: "单相",
    settype: "互感",
    status: "1",
    double: "1",
    line_name: "青澜实业HANER",
    num: "415-5",
    sum_num: "155341",
    room: "1#变子表",
    communicationDate: "2025-02-06 16:34:33",
    UA: 227.7,
    UB: 227.9,
    UC: 227.7,
    IA: 26.1,
    IB: 12.2,
    IC: 37.3,
    J: 0.0, F: 0.0, P: 0.0, G: 0.0, Z: 0.0,
    mounth: 0.0, new_day: 0.0,
    YG: 0.0,
    WG: 0.0
  }, {
    id: "008", use: '科斗',
    use_name: '科斗(苏州)脑际科技',
    gettype: "单相",
    settype: "互感",
    status: "1",
    double: "1",
    line_name: "青澜实业HANER",
    num: "415-5",
    sum_num: "155341",
    room: "1#变子表",
    communicationDate: "2025-02-06 16:34:33",
    UA: 227.7,
    UB: 227.9,
    UC: 227.7,
    IA: 26.1,
    IB: 12.2,
    IC: 37.3,
    J: 0.0, F: 0.0, P: 0.0, G: 0.0, Z: 0.0,
    mounth: 0.0, new_day: 0.0,
    YG: 0.0,
    WG: 0.0
  }, {
    id: "009", use: '科斗',
    use_name: '科斗(苏州)脑际科技',
    gettype: "单相",
    settype: "互感",
    status: "1",
    double: "1",
    line_name: "青澜实业HANER",
    num: "415-5",
    sum_num: "155341",
    room: "1#变子表",
    communicationDate: "2025-02-06 16:34:33",
    UA: 227.7,
    UB: 227.9,
    UC: 227.7,
    IA: 26.1,
    IB: 12.2,
    IC: 37.3,
    J: 0.0, F: 0.0, P: 0.0, G: 0.0, Z: 0.0,
    mounth: 0.0, new_day: 0.0,
    YG: 0.0,
    WG: 0.0
  }, {
    id: "010", use: '科斗',
    use_name: '科斗(苏州)脑际科技',
    gettype: "单相",
    settype: "互感",
    status: "1",
    double: "1",
    line_name: "青澜实业HANER",
    num: "415-5",
    sum_num: "155341",
    room: "1#变子表",
    communicationDate: "2025-02-06 16:34:33",
    UA: 227.7,
    UB: 227.9,
    UC: 227.7,
    IA: 26.1,
    IB: 12.2,
    IC: 37.3,
    J: 0.0, F: 0.0, P: 0.0, G: 0.0, Z: 0.0,
    mounth: 0.0, new_day: 0.0,
    YG: 0.0,
    WG: 0.0
  },
]);
const onDetail = () => {
  detailShow.value = !detailShow.value;
};
const onChartDetail = () => {
  chartShow.value = !chartShow.value;
  
};
</script>
<style lang="less" scoped>
li {
  list-style: none;
}

.content {
  box-shadow: 0px 0px 8px rgba(0.1, 0.1, 0.1, 0.3);
  border-radius: 10px;
}

.card_header {
  background: linear-gradient(90deg,
      #409eff,
      rgba(44, 166, 224, 0.2),
      rgba(44, 166, 224, 0));
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  padding: 15px 20px;
  color: #fff;
}

.card_form {
  // width: 80%;
  padding: 20px 20px;
  padding-top: 40px;
  // margin-bottom:20px;
  display: flex;
  justify-content: space-between;

  .check_status {
    display: flex;
    justify-content: flex-end;
    height: 30px;
    align-items: center;
    border-radius: 3px;
    border: 1.5px solid #2d8cf0;
    padding: 0 !important;
    width: 160px;

    .check {
      background-color: #2d8cf0;
      color: #fff;
    }

    div {
      width: 80px;
      height: 30px;
      text-align: center;
      line-height: 30px;
    }
  }
}

.demo-form-inline {
  .el-input {
    --el-input-width: 160px;
  }

  .el-select {
    --el-select-width: 160px;
  }
}

.card_table {
  padding: 20px 20px;
  padding-bottom: 100px;
  position: relative;
}

.card_box {
  box-shadow: 0px 0px 8px rgba(0.1, 0.1, 0.1, 0.3);
  border-radius: 10px;
  margin-bottom: 25px;
}

.card_box_descriptions {
  padding: 15px;
}

.log>li {
  margin-bottom: 15px;
}

:deep(.el-table__header .el-table__cell) {
  background: #409eff !important;
  color: #fff;
}

:deep(.el-table .ascending .sort-caret.ascending) {
  border-bottom-color: #fff !important;
}

:deep(.el-table .descending .sort-caret.descending) {
  border-top-color: #fff !important;
}

:deep(.el-table__row td:first-child:hover) {
  color: #409eff;
  cursor: pointer;
}

:deep(.el-form) {
  height: 45px;
}

:deep(.el-drawer__header) {
  margin-bottom: 0;
}

.card_item {
  width: 14%;
  border-radius: 15px;
  padding: 20px;
  color: #fff;
  background-color: #1ca839;
  margin: 10px;

  .card_item_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .card_item_body {
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #fff;
    color: black;
    margin: 10px;
    padding: 10px;

    div {
      width: 100%;
    }
  }
}
</style>
